import React, { memo, useEffect, useState } from "react"

const App = memo(() => {
    const [count, setCount] = useState(1)
    const [message, setMessage] = useState("早上好!")
    useEffect(() => {
        // 发送网络请求
        console.log("发送网络请求")
        return () => {
            console.log("11111")
        }
    }, [count])

    // 第二个参数传入空数组 可以模拟componentDidMount 和 componentWillUnmount生命周期函数
    useEffect(() => {
        // 监听redux
        console.log("监听redux")
        return () => {
            console.log("组件卸载时，才会执行")
        }
    }, [])

    useEffect(() => {
        // 监听redux
        console.log("监听redux")
        return () => {
            // 第二个参数传入空数组
            console.log("组件卸载时，才会执行")
        }
    }, [])

    // 一个函数式组件中，可以存在多个useEffect

    return (
        <div>
            <button onClick={(e) => setCount(count + 1)}>+1({count})</button>
            <button onClick={(e) => setMessage("晚上好")}>改变文本({message})</button>
        </div>
    )
})

export default App
